<template>
    <div class="mybook" style="height:500px;width:auto;overflow:scroll">
        <h2>我的二手书</h2>
        <divider></divider>
        <Col :xs="48" :sm="24" :md="24" :lg="24">
            <div class="query-c" style="padding-left: 10px">
                <Input search v-model="searchinput" placeholder="请输入要查询的书籍名称" style="width: auto"
                       @keyup.enter.native="search"/>
            </div>
            <divider></divider>
            <Table max-height="400" border stripe :columns="coloumnsbook" :data="bookdata"></Table>
        </Col>
    </div>
</template>

<script>
export default {
    name: 'mybook',
    data() {
        return {
            index: 999,
            searchinput: '',
            bookdata: [
            ],
            coloumnsbook: [
                {
                    title: '书籍名',
                    width: 200,
                    key: 'bookname',
                },
                {
                    title: '书籍作者',
                    width: 200,
                    key: 'writer',
                },
                {
                    title: '书籍上架时间',
                    width: 250,
                    key: 'time',
                },
                {
                    title: '书籍状态',
                    width: 250,
                    key: 'state',
                },
                {
                    title: '操作',
                    width: 250,
                    key: 'action',
                    align: 'center',
                    render: (h, params) => (
                        ('div', [
                            h('Button', {
                                props: {
                                    type: 'primary',
                                    size: 'small',
                                },
                                style: {
                                },
                                on: {
                                    click: () => {
                                        this.index = this.bookdata[params.index].number
                                        this.submit(this.index)
                                    },
                                },
                            }, '书籍详细信息'),
                        ])
                    ),
                },
            ],
        }
    },
    created() {
        fetch('http://localhost:5000/mybook', {
            method: 'post',
            body: JSON.stringify({
                username: localStorage.getItem('userName'),
            }),
            headers: { 'Content-Type': 'application/json' },
        }).then(
            res => res.json()
        ).then(
            res => {
                let conInfo = res.data
                let length = res.length
                for (let i = 0; i < length; i++) {
                    this.bookdata.push(conInfo[i])
                }
            }
        )
    },
    methods: {
        search() {
            fetch('http://localhost:5000/searchmybook', {
                method: 'post',
                body: JSON.stringify({
                    username: localStorage.getItem('userName'),
                    bookname: this.searchinput,
                }),
                headers: { 'Content-Type': 'application/json' },
            }).then(
                (res) => res.json()
            ).then(
                (res) => {
                    this.bookdata = []
                    let conInfo = res.data
                    let length = res.length
                    for (let i = 0; i < length; i++) {
                        this.bookdata.push(conInfo[i])
                    }
                }
            )
        },
        submit() {
            this.$router.push({
                name: 'bookdetail',
                params: {
                    bookname: this.index,
                },
            })
        },
    },
}
</script>

<style scoped>

</style>
